<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>商品搜索系统</title>
    <style>
        .container { max-width: 1000px; margin: 0 auto; padding: 20px; }
        .search-box { margin-bottom: 20px; padding: 15px; background: #f5f5f5; border-radius: 8px; }
        .form-inline { display: flex; flex-wrap: wrap; gap: 15px; align-items: center; }
        .form-inline label { font-size: 14px; margin-right: 8px; }
        .form-inline input { font-size: 14px; padding: 6px 12px; border: 1px solid #ddd; border-radius: 4px; }
        button { font-size: 14px; padding: 6px 15px; cursor: pointer; }
        .product-item { border: 1px solid #ddd; border-radius: 4px; padding: 15px; margin-bottom: 10px; }
        .colour-item { margin-left: 30px; padding: 10px; border-left: 3px solid #007bff; margin-top: 8px; }
        .hidden { display: none; }
    </style>
</head>
<body>
<div class="container">
    <div class="search-box">
        <h2 style="font-size: 18px; margin-bottom: 15px;">商品搜索</h2>
        <div class="form-inline">
            <div class="form-group">
                <label for="productNo">货号：</label>
                <input type="text" id="productNo" placeholder="请输入货号" class="form-control">
            </div>
            <div class="form-group">
                <label for="colour">颜色：</label>
                <input type="text" id="colour" placeholder="请输入颜色" class="form-control">
            </div>
            <button onclick="searchProducts()">搜索</button>
        </div>
    </div>

    <div id="results"></div>
</div>

<script>
    function searchProducts() {
        const productNos = document.getElementById('productNo').value;
        const colour = document.getElementById('colour').value;
        //  fetch('/api/products/search?productNo=' + productNo + '&colour=' + colour)
        fetch('/arcteryx/task/list', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                productNos: productNos,
                colour: colour
            })
        })
            .then(response => response.json())
            .then(data => {
                console.log(' fetching data:', data);
                renderResults(data.data);
            })
            .catch(error => console.error('Error:', error));
    }

    function renderResults(products) {
        const resultsDiv = document.getElementById('results');
        resultsDiv.innerHTML = '';
        console.log(' fetching data2:', products);
        products.forEach(product => {
            const productDiv = document.createElement('div');
            productDiv.className = 'product-item';

            productDiv.innerHTML = `
    <div style="display: flex; align-items: center; margin-bottom: 10px;">
        <strong style="font-size: 16px; margin-right: 15px;">链接：</strong>${product.existLink}
        ${!product.arcteryxColourVoList || product.arcteryxColourVoList.length <= 0 ? `<span style="color: red; margin-left: 15px;">${product.reason}</span>` :
                `<button class="toggle-btn" onclick="toggleColours(this)" style="padding: 4px 10px; margin-left: 15px;">隐藏详情</button>`}
    </div>
    ${product.arcteryxColourVoList && product.arcteryxColourVoList.length > 0 ? `
    <div class="colour-list ">
        ${product.arcteryxColourVoList.map(colour => `
            <div class="colour-item">
                <div><strong>颜色：</strong>${colour.colourLabel}</div>
                <div><strong>现价：</strong>${colour.realPrice}</div>
                <div><strong>库存：</strong>${colour.colourInventory}</div>
            </div>
        `).join('')}
    </div>` : ''}
`;


            resultsDiv.appendChild(productDiv);
        });
    }
    function toggleColours(button) {
       // const colourList = button.parentElement.querySelector('.colour-list');
        const productItem = button.closest('.product-item'); // 找到商品容器
        const colourList = productItem.querySelector('.colour-list'); // 在该容器内查找颜色列表
        colourList.classList.toggle('hidden');
        button.textContent = colourList.classList.contains('hidden') ? '显示详情' : '隐藏详情';
    }
</script>
</body>
</html>
